<template>
  <view class="content" v-if="isLoad">
    <view class="text-area">
      <text class="title" @tap="showMe">{{ title }}</text>
    </view>
    <div class="box">{{ 1 + 1 }} : {{ store.a }}</div>
    <button @click="add">添加</button>
    <button @click="testm1">测试</button>
    <u-icon name="photo" color="#2979FF" size="28"></u-icon>
    <u-button>月落</u-button>
    <u-calendar v-model="show" :mode="mode"></u-calendar>
    <u-button @click="show = true">打开</u-button>
    <u-form class="myform" ref="c-form" :model="form" :error-type="errorType">
      <u-form-item label="姓名" prop="name">
        <u-input placeholder="栏目1" v-model="form.name"></u-input>
      </u-form-item>
      <u-form-item label="年龄" prop="age">
        <u-input placeholder="栏目2" v-model="form.age"></u-input>
      </u-form-item>
      <u-button @click="submit">提交</u-button>
    </u-form>
    <button @tap="goTest">去测试页面</button>
    <button @click="test">添加</button>
  </view>
</template>
<script>
  import config from '@/config.js'
  import m1 from '@/mixins/m1.vue'
  import store from '@/store/index.js'
  import Parser from '../../libs/Explain.js'
  export default {
    mixins: [m1],
    data() {
      return {
        title: 'Hello',
        store,
        show: false,
        form: {
          name: '',
          age: ''
        },
        errorType: ['message'],
        rules: {
          name: [
            {
              required: true,
              message: '姓名必填',
              trigger: ['change', 'blur']
            }
          ],
          age: [
            {
              required: true,
              message: '年龄必填'
            }
          ]
        },
        isLoad: true
      }
    },
    mounted() {
      let c = this.$refs['c-form']
      c.setRules(this.rules)

      console.log(this.$route)
      console.log(999)
      console.log(config)
    },
    methods: {
      test() {
        new Parser({
          context: this,
          uni
        }).parse(`
          uni.showToast({
            title : 'helloworld',
            icon : 'none'
          })
          context.isLoad = false;
        `)
      },
      showMe() {
        console.log(`helloworld123`)
      },
      add() {
        store.add()
      },
      submit() {
        let c = this.$refs['c-form']
        c.validate((valid) => {
          if (valid) {
            console.log(99)
          } else {
            console.log(888)
          }
          //console.log(valid)
        })
      },
      goTest() {
        this.$router.push({
          name: 'test',
          query: {
            a: 999,
            b: 2
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .myform {
    padding: 0 30rpx;
  }
</style>
